<template>
  <view class="container">
    <!-- 顶部提示 -->
    <view class="top-tips">
      <uni-icons type="checkmark-filled" color="#4CAF50" size="20"></uni-icons>
      <text class="tip-text">支付成功，请您前往指定门店消费</text>
    </view>

    <!-- 门店信息 -->
    <view class="section">
      <text class="shop-title">伟业汽车没人厂（人民路店）</text>
      <text class="shop-address">山阳区人民中路32号</text>
    </view>

    <!-- 订单金额 -->
    <view class="section">
      <view class="section-title">订单详情</view>
          <price-item label="车辆精选" value="¥ 199"/>
      <price-item label="车辆附加费用" value="¥ 199"/>
      <view class="price-line">
        <text>原价</text>
        <text class="original-price">¥ 100</text>
      </view>
      <price-item label="优惠" value="– ¥ 10" type="discount"/>
      <price-item label="优惠券" value="– ¥ 20" type="discount"/>
      <view class="total-line">
        <text>支付金额</text>
        <text class="total-price">¥ 90</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="section">
      <view class="section-title">订单信息</view>
      <info-item label="订单号" value="121212112487878"/>
      <info-item label="下单时间" value="2020.01.08 17:40"/>
      <info-item label="车辆" value="奔驰FWE4/豫A98FFIJ"/>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const PriceItem = {
  props: ['label', 'value', 'type'],
  template: `
    <view class="price-line">
      <text>{{ label }}</text>
      <text :class="['price-value', type === 'discount' ? 'discount' : '']">
        {{ value }}
      </text>
    </view>
  `
}

const InfoItem = {
  props: ['label', 'value'],
  template: `
    <view class="info-line">
      <text class="info-label">{{ label }}</text>
      <text class="info-value">{{ value }}</text>
    </view>
  `
}
</script>

<style lang="scss">
.container {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.top-tips {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .tip-text {
    margin-left: 15rpx;
    color: #333;
    font-size: 28rpx;
  }
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  &-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    color: #333;
  }
}

.shop-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.shop-address {
  font-size: 26rpx;
  color: #666;
}

.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;

  .price-value {
    color: #333;
    
    &.discount {
      color: #E64340;
    }
  }
}

.original-price {
  text-decoration: line-through;
  color: #999 !important;
}

.total-line {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;

  .total-price {
    font-size: 36rpx;
    color: #E64340;
    font-weight: bold;
  }
}

.info-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25rpx;
  font-size: 28rpx;

  .info-label {
    color: #999;
  }

  .info-value {
    color: #666;
    max-width: 70%;
    text-align: right;
  }
}
</style>